import { Modal, Table, Tag,  Button } from 'antd'
import { useEffect, useState } from "react"
import { getProcess } from "@/apis/process"
import {
  CheckCircleOutlined,
  SyncOutlined,
  CloseCircleOutlined
} from '@ant-design/icons'



const ProcessModal = ({ isProcessModalOpen, handleProcessModalCancel,openSolution }) => {
  const columns = [
    {
      title: '操作',
      key: 'action',
      align: 'center',
      ellipsis: true,
      fixed: 'left',
      width: 120,
      render: (record) => <Button type='primary' onClick={() => clickButton(record)}>选择</Button>
    },
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      ellipsis: true,
      fixed: 'left',
      width: 100,
      defaultSortOrder: 'descend',  // 默认降序
      sorter: (a, b) => a.id - b.id,
      style: {
        maxWidth: 100
      }
    },
    {
      title: '运行算法名',
      dataIndex: 'algor_name',
      key: 'algor_name',
      align: 'center',
      ellipsis: true,
      filters: [
        {
          text: 'MOSL',
          value: 'MOSL',
        },
        {
          text: 'MOMA',
          value: 'MOMA',
        }
      ],
      onFilter: (value, record) => (
        // console.log(value, record)
        record.algor_name[0] === value
      ),
    },
    {
      title: '运行数据集名',
      dataIndex: 'file_name',
      key: 'file_name',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '当前状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      ellipsis: true,
      render: (record) => (
        record === 0 ?
          <Tag className="status" color="processing" icon={<SyncOutlined spin />}>运行中</Tag> :
          record === 1 ?
            <Tag className="status" color="success" icon={<CheckCircleOutlined />}>运行成功</Tag> :
            <Tag className="status" icon={<CloseCircleOutlined />} color="error">运行失败</Tag>
      )
    },
    {
      title: '客户数量',
      dataIndex: 'c_num',
      key: 'c_num',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '容量类型',
      dataIndex: 'c_type',
      key: 'c_type',
      align: 'center',
      ellipsis: true,
      width: 100,
      style: {
        maxWidth: 100
      },
      render: (text) => (text)
    },
    {
      title: '时间窗类型',
      dataIndex: 'w_type',
      key: 'w_type',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '停止时间',
      dataIndex: 's_time',
      key: 's_time',
      align: 'center',
      ellipsis: true,
      render: (record) => record
    },
    {
      title: '迭代次数',
      dataIndex: 'i_time',
      key: 'i_time',
      align: 'center',
      ellipsis: true,
      render: (record) => record
    },
    {
      title: '运行时间',
      dataIndex: 'r_time',
      key: 'r_time',
      align: 'center',
      ellipsis: true,
      width: 200,
      render: (record) => record
    },
  ]

  const [data, setData] = useState([])

  const processedData = (data) => {
    if (data) {
      // console.log(data)
      return data.map((row, rowIndex) => {
        let rowData = {
          key: rowIndex + 1,
          id: rowIndex + 1,
          algor_name: row[11],
          file_name: row[2],
          c_num: row[3],
          c_type: row[4],
          w_type: row[5],
          s_time: row[6],
          i_time: row[7],
          r_time: row[8],
          algor_id: row[1],
          status: row[9],
          process_id: row[0]
        }
        return rowData
      })
    }
  }

  useEffect(() => {
    const getProcessList = async () => {
      const res = await getProcess()
      setData(processedData(res).filter(item => item.status === 1))
    }
    getProcessList()

  }, [])

  const clickButton = (record) => {
    openSolution(record.process_id)
    handleProcessModalCancel(null)
  }


  return (
    <div>
      <Modal
        title="选择解决方案"
        open={isProcessModalOpen}
        width={1000}
        onOk={() => handleProcessModalCancel(null)}
        onCancel={() => handleProcessModalCancel(null)}
        okText="确定"
        cancelText="取消"
      >
        <Table
          columns={columns}
          dataSource={data}
          bordered
          scroll={{
            y: 'calc(100vh - 420px)',
            x: '110vw',
          }}
        />

      </Modal>
    </div>
  )
}

export default ProcessModal